import React, {Fragment} from 'react';
import {connect} from 'dva'
import {Page} from 'components'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import {
  Row,
  Col,
  Form,
  Radio,
  Icon,
  Modal,
  Popover,
  Select
} from 'antd'
import LwjTrees from 'components/LwjTree'
import GeneralFilter from 'components/Filter/GeneralFilter'
import LwjTable from 'components/LwjTable/LwjTable'
import style from './index.less'
import {Link} from 'dva/router'
import lodash from 'lodash'
import CartModal from './cartModal'


const FormItem = Form.Item;
const RadioGroup = Radio.Group;
let isAddCart = false;
const Option = Select.Option;
const orderSalesmarket = ({location, dispatch, orderSalesmarket, loading}) => {

  const {
    productList,
    pagination,
    detailModal,
    detailUrl,
    classifyList,
    cartList,
    cartVisible,
    totalChannelPrice,
    totalRetailPrice,
    totalPrice,
    count
  } = orderSalesmarket;

  // 面包屑
  const breadcrumbList = [
    {
      title: '待办订单',
      href: ''
    }, {
      title: '添加商品'
    }
  ];

  // 筛选条件
  const filterProps = {
    filterItems: [
      {
        type: 'treeSelect',
        id: 'cateIdAndChild',
        title: '商品分类',
        options: classifyList,
        maxTagCount: 1,
        placeholder: "请选择"
      },
      {
        type: 'input',
        id: 'name',
        title: '商品名称'
      }, {
        type: 'input',
        id: 'goods_id',
        title: 'SPU编码'
      }, {
        type: 'input',
        id: 'id',
        title: 'SKU编码'
      }
    ],
    col: 5,
    isExpand: true,
    onFilterChange(value) {
      let _temp = lodash.cloneDeep(value);
      console.log(_temp)
      if(_temp.cateIdAndChild){
        _temp.cateIdAndChild = _temp.cateIdAndChild.split("-").pop();
      }
      dispatch({
        type: 'orderSalesmarket/setQueryParam',
        queryParam: _temp
      })
      dispatch({
        type: 'orderSalesmarket/query',
        payload: {
          limit: pagination.pageSize,
          start: 0
        }
      })
    }
  }


  // 列表相关
  const listProps = {
    dataSource: productList,
    loading: loading.effects['orderSalesmarket/query'],
    pagination,
    pageChangeAction: 'orderSalesmarket/query',
    dispatch,
    location
  }

  //商品列
  const productsColumns = [
    {
      title: 'SPU编码',
      dataIndex: 'goods_id',
      key: 'goods_id',
      width: '10%'
    }, {
      title: 'SKU编码',
      dataIndex: 'id',
      key: 'id',
      width: '10%'
    }, {
      title: '商品图片',
      dataIndex: 'goods_info',
      key: 'goods_info',
      width: '15%',
      render: (text, record) => {
        return (
          <Popover content={<img src={record.goods_info ? record.goods_info.cover_path : ''} className={style.productBigImg} />} title="商品图片" placement="right">
            <img src={record.goods_info ? record.goods_info.cover_path : ''} className={style.productSmallImg} />
          </Popover>
        )
      }
    }, {
      title: '商品名称',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
      render: (text, record, index) => (
        <span>
          <a onClick={() => showProductDetail(record.detail_url)}>{text}</a>
        </span>
      )
    }, {
      title: '零售价',
      dataIndex: 'price',
      key: 'price',
      width: '15%'
    }, {
      title: '渠道价',
      dataIndex: 'channel_price',
      key: 'channel_price',
      width: '10%'
    }, {
      title: '库存',
      dataIndex: 'stock',
      key: 'stock',
      width: '10%'
    }, {
      title: '操作',
      dataIndex: 'handleType',
      key: 'handleType',
      width: '10%',
      render: (text, record, index) => {
        if(record.has_material){
          return (<span><a onClick={() => addToCart(record)}>添加</a></span>)
        }else{
          return (<span>未绑定物料，暂不能下单</span>)
        }
      }
    }
  ]

  //显示详情弹窗
  const showProductDetail=(detailUrl)=>{
    dispatch({
      type: 'orderSalesmarket/showProductDetail',
      detailUrl
    })
  }

  //详情弹窗属性
  const modalProps={
    title:"详情页",
    visible:detailModal,
    footer:null,
    width: "90%",
    onCancel:()=>{
      dispatch({
        type: 'orderSalesmarket/hideProductDetail'
      })
    },
    style: {top: '24px',bottom: '0px',left: '5%',right: '5%',position: 'fixed', margin: '0px !important'},
    bodyStyle: {position: 'fixed',top: '80px',bottom: '24px',left: '5%',right: '5%',padding: '0px'}
  }

  //加入购物车
  const addToCart=(record)=>{
    for(let i=0, len=cartList.length ; i<len; i++){
      if(cartList[i].id == record.id){
        return;
      }
    }
    cartList.push({
      ...record,
      number: 1
    });
    dispatch({
      type: 'orderSalesmarket/setCartList',
      cartList: cartList
    })
  }

  const cartProps = {
    visible: cartVisible,
    list: cartList,    
    totalChannelPrice,
    totalRetailPrice,
    totalPrice,
    count,
    dispatch,
    effects: loading.effects
  }

  const showCartDrawer = () => {
    dispatch({
      type: 'orderSalesmarket/showCartDrawer'
    })
  }

  return (
    <PageHeaderLayout title="分销市场" breadcrumbList={breadcrumbList}>
      <Page inner>
        <div className={style.filter}>
          <GeneralFilter {...filterProps}/>
        </div>

        <LwjTable {...listProps} columns={productsColumns}/>

        <Modal {...modalProps}>
          <iframe style={{width:'100%',border: '0px',height: '100%'}} src={detailUrl}></iframe>
        </Modal>

        <div className={style.cart} onClick={() => showCartDrawer()} style={{position:'fixed',right:'30px',bottom:'70px',fontSize:'40px',color:'#33bdb8',zIndex: 100,backgroundColor: '#fff',boxShadow:'0px 0px 2px rgba(0,0,0,0.8',borderRadius: '100%',width: '60px',height: '60px'}}>
          <Icon style={{cursor: 'pointer'}} type="shopping-cart" theme="outlined" />
          <span className={style.cartNum}>{cartList ? cartList.length : 0}</span>
        </div>

        <CartModal {...cartProps} />
      </Page>
    </PageHeaderLayout>
  )
};

export default connect(({orderSalesmarket, loading}) => ({orderSalesmarket, loading}))(orderSalesmarket)
